<!DOCTYPE html>
<html lang="en">
<head>
<!--:include("/admin/inc/head.html"){}  -->
<link rel="stylesheet" href="${root}assets/plugins/jquery-treetable/css/screen.css" />
<link rel="stylesheet" href="${root}assets/plugins/jquery-treetable/css/jquery.treetable.css" />
<link rel="stylesheet" href="${root}assets/plugins/jquery-treetable/css/jquery.treetable.theme.default.css" />
    </head>
<body class="fix-header card-no-border logo-center">
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper">
        <!--:include("/admin/inc/header.html"){}  -->
        <!--:include("/admin/inc/aside.html"){}  -->
        <div class="page-wrapper">
            <div class="container-fluid" >
                <div class="row page-titles">
                    <div class="col-md-5 col-8 align-self-center">
                        <h3 class="text-themecolor m-b-0 m-t-0">系统管理</h3>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">用户管理</a></li>
                            <li class="breadcrumb-item active">用户列表</li>
                        </ol>
                    </div>
                    <div class="col-md-7 col-4 align-self-center">
                        <div class="d-flex m-t-10 justify-content-end">
                            <div class="d-flex m-r-20 m-l-10 hidden-md-down">
                                <div class="chart-text m-r-10">
                                    <h6 class="m-b-0"><small>单位数量</small></h6>
                                    <h4 class="m-t-0 text-info">${units.~size!0}</h4></div>
                                <div class="spark-chart">
                                    <div id="monthchart"></div>
                                </div>
                            </div>
                            <div class="d-flex m-r-20 m-l-10 hidden-md-down">
                                <div class="chart-text m-r-10">
                                    <h6 class="m-b-0"><small>用户总数</small></h6>
                                    <h4 class="m-t-0 text-primary">1,356</h4></div>
                                <div class="spark-chart">
                                    <div id="lastmonthchart"></div>
                                </div>
                            </div>
                            <div class="">
                                <button class="right-side-toggle waves-effect waves-light btn-success btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">课程列表</h4>
                                <h6 class="card-subtitle"></h6>
                                <div class="m-t-40">
                                        <div class="d-flex">
                                            <div class="mr-auto">
                                                <div class="form-group">
                                                    <button id="demo-btn-addrow" class="btn btn-primary btn-sm"><i class="icon wb-plus" aria-hidden="true"></i>新增课程
                                                    </button>
                                                    <!-- <small>新增课程</small> -->
                                                     </div>
                                            </div>
                                            <div class="ml-auto">
                                                <div class="form-group">
                                                    <input id="demo-input-search2" type="text" placeholder="Search" autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="demo-foo-addrow" class="table m-t-30 table-hover contact-list" data-limit-navigation="10" data-page-size="10">
                                        <thead>
                                            <tr>
                                                <th>${obj.comm.id!}</th>
                                                <th>${obj.comm.img!}</th>
                                                <th width="300px">${obj.comm.title!}</th>
                                                <th>${obj.comm.type!}</th>
                                                <th>讲师</th>
                                                <th>价格</th>
                                                <th>分类</th>
                                                <th>标签</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        	<!--:for(c in obj.list!){  -->
                                            <tr>
                                                <td>${c.id!}</td>
                                                <td>
                                                    <a href="javascript:void(0)"><img src="${www}${c.img}" alt="user" width="40" class="img-circle" /></a>
                                                </td>
                                                <td>${c.title!}</td>
                                                <td>${c.type!}</td>
                                                <td>${c.teacher!}</td>
                                                <td>${c.price!}</td>
                                                <td>${c.cate1!}-${c.cate2!}</td>
                                                <td>${c.tag!}</td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-icon btn-pure btn-outline delete-row-btn" data-toggle="tooltip" data-original-title="编辑">
                                                    	编辑
                                                    </button>
                                                </td>
                                            </tr>
                                            <!--:}  -->
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="2">
                                                    <button type="button" class="btn btn-info btn-rounded" data-toggle="modal" data-target="#add-contact">Add New Contact</button>
                                                </td>
                                                <div id="add-contact" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                <h4 class="modal-title" id="myModalLabel">Add New Contact</h4> </div>
                                                            <div class="modal-body">
                                                                <from class="form-horizontal form-material">
                                                                    <div class="form-group">
                                                                        <div class="col-md-12 m-b-20">
                                                                            <input type="text" class="form-control" placeholder="Type name"> </div>
                                                                        <div class="col-md-12 m-b-20">
                                                                            <input type="text" class="form-control" placeholder="Email"> </div>
                                                                        <div class="col-md-12 m-b-20">
                                                                            <input type="text" class="form-control" placeholder="Phone"> </div>
                                                                        <div class="col-md-12 m-b-20">
                                                                            <input type="text" class="form-control" placeholder="Designation"> </div>
                                                                        <div class="col-md-12 m-b-20">
                                                                            <input type="text" class="form-control" placeholder="Age"> </div>
                                                                        <div class="col-md-12 m-b-20">
                                                                            <input type="text" class="form-control" placeholder="Date of joining"> </div>
                                                                        <div class="col-md-12 m-b-20">
                                                                            <input type="text" class="form-control" placeholder="Salary"> </div>
                                                                        <div class="col-md-12 m-b-20">
                                                                            <div class="fileupload btn btn-danger btn-rounded waves-effect waves-light"><span><i class="ion-upload m-r-5"></i>Upload Contact Image</span>
                                                                                <input type="file" class="upload"> </div>
                                                                        </div>
                                                                    </div>
                                                                </from>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-info waves-effect" data-dismiss="modal">Save</button>
                                                                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
                                                            </div>
                                                        </div>
                                                        <!-- /.modal-content -->
                                                    </div>
                                                    <!-- /.modal-dialog -->
                                                </div>
                                                <td colspan="7">
                                                    <div class="text-right">
                                                        <ul class="pagination"> </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--:include("/admin/inc/theme.html"){}  -->
            </div>
            <footer class="footer"> © 2017 Material Pro Admin by wrappixel.com </footer>
        </div>
    </div>
    <script src="${root}assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="${root}assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="${root}assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="${root}js/jquery.slimscroll.js"></script>
    <!--Wave Effects -->
    <script src="${root}js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="${root}js/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="${root}assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="${root}assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Custom JavaScript -->
    <script src="${root}js/custom.min.js"></script>
    <!-- Footable -->
    <script src="${root}assets/plugins/footable/js/footable.all.min.js"></script>
    <script src="${root}assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
    <!--FooTable init-->
    <!-- ============================================================== -->
    <!-- Style switcher -->
    <!-- ============================================================== -->
    <script src="${root}assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
    <script src="${root}assets/plugins/jquery-treetable/jquery.treetable.js"></script>
    <!--Nestable js -->
    <script>
    $(function(){
    
    	$('#demo-foo-addrow').footable();
	})
	</script>
</body>

</html>
